<template lang="">
  <a-modal
    title="$t('zhiF-1')"
    :visible="visible"
    :centered="true"
    :closable="false"
    :destroyOnClose="true"
    :maskClosable="false"
  >
    <template #footer>
      <a-button key="back" @click="handleCancel" size="large">{{ $t('quXi') }}</a-button>
      <a-button
        key="submit"
        type="primary"
        :loading="loading"
        @click="handleOk"
        size="large"
        >{{ $t('woYi-0') }}</a-button
      >
    </template>

    <div class="modal-body">
      <div class="qrcode">
        <h3>{{ $t('tiSh-1') }}</h3>
        <p>
          {{ $t('1Qin', [accountName]) }}
        </p>
        <p>{{ $t('2Jin') }}</p>
        <p>{{ $t('3Jin') }}</p>

        <img :src="qrCodeUrl" title="$t('qing-21')" />
        <h3>
          {{ $t('diZh-0') }} <b>{{ address }}</b>
        </h3>
        <h3>
          {{ $t('xuNi-2') }} <b>{{ props.channel }}</b>
        </h3>
        <h3>
          {{ $t('chong-0') }} <b class="money">{{ props.rechargeAmount }}</b>
        </h3>
        <h3>
          {{ $t('xuNi-3') }} <b class="money">{{ props.virtualAmount }}</b>
        </h3>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
import QRCode from "qrcode";
import {
  createDepositApplication,
  getDepositCompanyAccountByPaymentId,
} from "@/api/financial";
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  paymentId: {
    type: String,
    required: true,
  },
  depositSettingId: {
    type: String,
    required: true,
  },
  // 充值金额
  rechargeAmount: {
    type: String,
    required: true,
  },
});

const loading = ref<boolean>(false);
const qrCodeUrl = ref<string>();
const accountName = ref<string>();
const address = ref<string>();

const emits = defineEmits(["ok", "cancel"]);
const router = useRouter();

watch(
  () => props.paymentId,
  (newVal) => {
    fetchDepositCompanyAccount(newVal);
  }
);

function fetchDepositCompanyAccount(paymentId: string) {
  loading.value = true;
  getDepositCompanyAccountByPaymentId(paymentId)
  .then((res: any) => {
    const { receiving_qr_code, account_name } = res;
    if (receiving_qr_code) {
      address.value = receiving_qr_code;
      generateQRCode(receiving_qr_code);
    }
    if (account_name) {
      accountName.value = account_name;
    }
  })
  .catch((err: any) => {
    console.log(err)
  })
  .finally(() => {
    loading.value = false;
  })
}

function fetchCreateDeposit() {
  createDepositApplication({
    deposit_settings_id: Number(props.depositSettingId),
    payment_method_id: Number(props.paymentId),
    amount: Number(props.rechargeAmount),
  })
    .then((res: any) => {
      console.log(res);
      emits("ok");
      // TODO 用户确定已经完成支付，跳转到存款记录列表
    })
    .catch((err: any) => {
      console.log(err);
    })
    .finally(() => {
      loading.value = false;
    });
}
const handleOk = () => {
  fetchCreateDeposit()
};

const handleCancel = () => {
  emits("cancel");
};

function generateQRCode(text: string) {
  const canvas = document.createElement("canvas");
  QRCode.toCanvas(canvas, text, (error: any) => {
    if (error) {
      console.error(error);
      return;
    }
    // 将生成的二维码图像转换为URL
    qrCodeUrl.value = canvas.toDataURL("image/png");
  });
}
</script>
<style lang="less" scoped>
.modal-body {
}
</style>
